<!--link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css" />

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>

<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script-->


{% extends "exams/base_exams.html" %}

{% block content %}


<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>

<link type="text/css" rel="stylesheet" href="../../media/htmlwidgets/js/jscalendar-1.0/calendar-win2k-1.css" />

<script type="text/javascript" src="../../media/htmlwidgets/js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="../../media/htmlwidgets/js/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="../../media/htmlwidgets/js/jscalendar-1.0/calendar-setup.js"></script>

<script type="text/javascript" src="../../media/htmlwidgets/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

<script type="text/javascript" src="../../media/htmlwidgets/js/modernizr.com/modernizr-1.5.min.js">
</script>
<script type="text/javascript" src="../../media/htmlwidgets/js/EventHelpers.js">
</script>
<script type="text/javascript" src="../../media/htmlwidgets/js/html5Widgets.js">
</script>

<script type="text/javascript" src="../../media/html5slider/html5slider.js">
</script>


<script type="text/javascript">

/*	
	//Þetta var ekki að virka :( (ekki heldur Modinizr.load(
	yepnope({
		  test: Modernizr.inputtypes.date,
		  yep : '/static/admin/js/jquery.min.js',
		  nope: ['/static/admin/js/jquery.min.js',
					'../../media/htmlwidgets/js/jscalendar-1.0/calendar.js',
					'../../media/htmlwidgets/js/jscalendar-1.0/lang/calendar-en.js',
					'../../media/htmlwidgets/js/jscalendar-1.0/calendar-setup.js',
					'../../media/htmlwidgets/js/weston.ruter.net/webforms2/webforms2_src.js',
   				//'../../media/htmlwidgets/js/modernizr.com/modernizr-1.5.min.js',
					'../../media/htmlwidgets/js/EventHelpers.js',
					'../../media/htmlwidgets/js/html5Widgets.js']
		});
*/

	function removeLastQuestion( ) {
		q_counter = q_counter - 1;
		if(a_counter[q_counter] != undefined)
			a_counter[q_counter] = undefined;
		
		$('#Question_' + q_counter).remove();
	}

	function validate_exam_name() {
		$('#id_name').animate({ border: "0.5px solid grey" } );
		var name = $("#id_name").val().trim();
		if(name == '') {
			$('#id_name').animate({ border: "3px solid red" } );
			return false;
		}
		return true;
	}

	function validate_one_question() {
		$('#question_header').animate({ border: "0" } );
		if(q_counter <= 1) {
			$('#question_header').animate({ border: "3px solid red" } );
			return false;
		}
		return true;
	}

	function validate_atleast_one_answer() {
		var all_is_valid = true;

		//loop all questions
		for(var i = 1; i < q_counter; i++) {
			var q_has_answer = false;
			$('#id_question_' + i).animate({ border: "0.5px solid grey" } );
			for(var j = 1; j < a_counter[i]; j++) {
				var this_id = '#id_answer_ck_' + i + '_' + j;
				var value = $(this_id).is(':checked');
				if(value == true) {
					q_has_answer = true;
				}
			}
			//console.log("q_has_answer: " + q_has_answer);
			if(!q_has_answer) {
				$('#id_question_' + i).animate({ border: "3px solid red" } );
				all_is_valid = false;
			}
		}

		return all_is_valid;
	}

	function validate_not_multiple_answers() {
		var all_is_valid = true;

		//loop all questions
		for(var i = 1; i < q_counter; i++) {
			var q_has_answer = false;
			$('#id_question_' + i).animate({ border: "0.5px solid grey" } );
			for(var j = 1; j < a_counter[i]; j++) {
				var this_id = '#id_answer_ck_' + i + '_' + j;
				var value = $(this_id).is(':checked');
				if(q_has_answer && value) {
					q_has_answer = false;
					break;
				}
				if(value == true) {
					q_has_answer = true;
				}
			}

			//console.log("q_has_answer: " + q_has_answer);
			if(!q_has_answer) {
				$('#id_question_' + i).animate({ border: "3px solid red" } );
				all_is_valid = false;
			}
		}

		return all_is_valid;
	}

   function validate_num_value() {
		var all_is_valid = true;

		//loop all questions
		for(var i = 1; i < q_counter; i++) {
			$('#value_question_' + i).animate({ border: "0.5px solid grey" } );
                        var value = $('#value_question_' + i).value();
                        value = parseFloat(value);
			if( isNaN(value) ){
				$('#value_question_' + i).animate({ border: "3px solid red" } );
				all_is_valid = false;
			}
		}

		return all_is_valid;            
	}


	function validate() {

		$("#error_message").hide(0);

		if(!validate_exam_name()) {
			$("#error_message").show(0);
			$("#error_message").text('Please set an exam name');
			return false;
		}

		if(!validate_one_question()) {
			$("#error_message").show(0);
			$("#error_message").text('No questions have been created');
			return false;
		}

		if(!validate_atleast_one_answer()) {
			$("#error_message").show(0);
			$("#error_message").text("Some questions don't have correct answers");
			return false;
		}

		if(!validate_not_multiple_answers()) {
			$("#error_message").show(0);
			$("#error_message").text("Some questions more than one correct answer");
			return false;
		}
                if(!validate_num_value()) {
			$("#error_message").show(0);
			$("#error_message").text("The value of a question must be numeric.");
			return false;
		}

		return true;
	}

	a_counter = [];
	function addAnswer( question ) {
		if(a_counter[question] == undefined)
			a_counter[question] = 1;
		
		var this_id = question + '_' + a_counter[question];

		var thediv = '#Answers_' + question;
		
		var label = '<div class="answers">';
		label += '<label for="id_answer_' + this_id + '">Answer:</label>';
		label += '<input type="text" name="answer_' + this_id + '" id="id_answer_' + this_id + '" value="" />';
		label += '<input type="checkbox" name="answer_ck_' + this_id + '" id="id_answer_ck_' + this_id + '" value="" />';
		label += '</div>';
		$(thediv).append(label);
		a_counter[question] = a_counter[question] + 1;
	}

	var q_counter = 1;
	function addQuestion( ) {
		
		var label = '<div class="questions" id="Question_' + q_counter + '">';
		label += '<label for="id_question_' + q_counter + '">Question:</label>';
		label += '<input type="text" name="question_' + q_counter + '" id="id_question_' + q_counter + '" value=" " />';
      label += '<label for="value_question_' + q_counter + '">Value: </label>';
		label += '<input type="range" name="val_question_' + q_counter + '" id="value_question_' + q_counter + '" value="50" />';
		label += '<div id="Answers_' + q_counter + '"></div>';
		label += '<a id="addAnswer_' + q_counter + '" href="#" onclick="addAnswer(' + q_counter + ')">Add answer</a></div>';
		$("#Questions").append(label);
		q_counter = q_counter + 1;
	}

</script>

<h1>Create new exam</h1>

<p><strong><span id="error_message"></span></strong></p>
<form action="/exams/create/" method="post">
{% csrf_token %}	
<div class="exam_info">
<label for="id_name">Name of exam:</label>
<input type="text" name="exam_name" id="id_name" value="{{ exam.name }}" />
</div>
<div class="exam_info">
<label for="id_deadline">Deadline:</label>
<input name="exam_deadline" value='{{ exam.deadline|date:"Y-m-d" }}' type="date" id="id_deadline" size="10" />
</div>
<div id="question_header">
<h3>Questions</h3>
</div>
<div id="Questions">
</div>
<a id="addQuestion" href="#" onclick="addQuestion()">Add question</a>
<div>
</div>
<a id="removeQuestion" href="#" onclick="removeLastQuestion()">Remove last question</a>
<div>
<input type="submit" value="Submit" onclick="return validate();"/>
</div>
</form>
<a href="/exams/">Back to exams</a>

{% endblock %}
